﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>إضافة أداة المتابعة عبر الشبكات الإجتماعية ( مع عدد المتابعين ) </title>
</head>

<body>
<style type="text/css"> 
.container { 
  margin: 0px auto; 
  width: 270px; 
  text-align: center; 
  float: center; 
} 
.btn-sbm { 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
  margin: 0 5px; 
  padding-top: 40px; 
  width: 75px; 
  font-weight: bold; 
  text-align: center; 
  text-decoration: none; 
  border-radius: 8px; 
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); 
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); 
} 
.btn-sbm:active { 
  margin-top: 3px; 
} 
.btn-sbm:active .btn-sbm-action { 
  padding-bottom: 3px; 
  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); 
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15); 
} 
.btn-sbm:active .btn-sbm-action:after { 
  bottom: 3px; 
} 
.btn-sbm-count { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  line-height: 40px; 
  font-size: 20px; 
  letter-spacing: -1px; 
  color: #555; 
  text-shadow: 0 1px white; 
  background: #e6eff5; 
  border-width: 1px 1px 0; 
  border-style: solid; 
  border-color: #c5c5c5 #bbb; 
  border-radius: 8px 8px 0 0; 
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%); 
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); 
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07); 
} 
.btn-sbm-count:before, .btn-sbm-count:after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 50%; 
  margin-left: -6px; 
  border: 6px solid transparent; 
  border-top-color: #e6eff5; 
} 
.btn-sbm-count:before { 
  margin-left: -7px; 
  margin-top: 1px; 
  border-width: 7px; 
  border-top-color: rgba(0, 0, 0, 0.07); 
} 
.btn-sbm-action { 
  display: block; 
  position: relative; 
  line-height: 32px; 
  padding: 2px 0 6px; 
  font-size: 18px; 
  color: white; 
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 
  border: solid rgba(0, 0, 0, 0.18); 
  border-width: 0 1px; 
  border-radius: 0 0 8px 8px; 
} 
.btn-sbm-action:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  bottom: 6px; 
  left: 0; 
  right: 0; 
  border-radius: 0 0 6px 6px; 
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); 
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25); 
} 
.btn-sbm-tweet { 
  background: #83cfe8; 
  background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4); 
  background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4); 
  background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4); 
  background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4); 
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); 
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15); 
} 
.btn-sbm-tweet:after { 
  -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); 
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5); 
} 
.btn-sbm-tweet + .btn-sbm-count { 
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); 
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04); 
} 
.btn-sbm-like { 
  background: #6480bd; 
  background-image: -webkit-linear-gradient(top, #6480bd, #3c5894); 
  background-image: -moz-linear-gradient(top, #6480bd, #3c5894); 
  background-image: -o-linear-gradient(top, #6480bd, #3c5894); 
  background-image: linear-gradient(to bottom, #6480bd, #3c5894); 
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); 
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2); 
} 
.btn-sbm-plus { 
  background: #626262; 
  background-image: -webkit-linear-gradient(top, #626262, #404040); 
  background-image: -moz-linear-gradient(top, #626262, #404040); 
  background-image: -o-linear-gradient(top, #626262, #404040); 
  background-image: linear-gradient(to bottom, #626262, #404040); 
  -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); 
  box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3); 
} 
</style> 
<br/> 
<div class="container"> 
     <a href=https://twitter.com/7loll_blogger rel="nofollow" target="_blank"rel="author"  title="تابعنا عبر التويتر" class="btn-sbm"> 
      <span class="btn-sbm-action btn-sbm-tweet">تويتر</span> 
      <span class="btn-sbm-count">150+</span> 
    </a> 
    <a href=http://www.facebook.com/7loll rel="nofollow" target="_blank" title="صفحتنا على الفايسبوك" class="btn-sbm"> 
      <span class="btn-sbm-action btn-sbm-like">فايسبوك</span> 
      <span class="btn-sbm-count">650+</span> 
    </a> 
    <a href="https://plus.google.com/100752619210375925158" class="btn-sbm" target="_blank" rel="author" title="تابعنا على جوجل+"> 
      <span class="btn-sbm-action btn-sbm-plus">جوجل+</span> 
      <span class="btn-sbm-count">140+</span> 
    </a><br/> 
</div>

</body>

</html>
